@import "../../../assets/styles/media.scss";
@import "../../../assets/styles/rainbowify.scss";

.app-navigation {
  @include rainbowify(background-color);

  background-image:
    linear-gradient(0deg, #202020, rgba(32, 32, 32, 0.333));
  flex-basis: 0;
  flex-grow: 1;
  padding: 0 0 0 1px;

  > ul {
    $line-height: 2em;

    background-color: #202020;
    line-height: $line-height;
    list-style-type: none;
    margin: 0;
    padding: ($line-height - 1em) / 2 1em;
  }

  @include mobile {
    background-image:
      linear-gradient(90deg, #202020, transparent, #202020);
    padding: 0 0 1px 0;

    > ul {
      display: flex;
      flex-direction: row;
      // Relative position allows sublinks to stretch to the left and right of
      //   the parent list.
      position: relative;
    }
  }
}
